<template>
	<div>
		<view class="pay-methods-list">
			<block v-for="(item, index) in list" :key="index">
				<view
					class="methods-item flex align-center just-between"
					@click="onChoose(index)"
				>
					<image class="icon" :src="getImageURL(item.icon)" />
					<text class="title f-32">{{ item.title }}</text>
					<view class="choose-bg">
						<image
							:src="getImageURL('common/pay_select.png')"
							v-if="item.select"
						/>
						<image
							v-else
							:src="getImageURL('common/pay_normal.png')"
						/>
					</view>
				</view>
			</block>
		</view>
	</div>
</template>

<script>
	/**
	 * 支付方式的组件
	 */
	export default {
		props: {
			/**
			 * 显示方式
			 * 1: 全部显示
			 * 2: 仅显示微信
			 */
			showMethods: {
				type: Number,
				default: 0,
			},
			/**
			 * 支付方式
			 */
			status: {
				type: String,
				default: "",
			},
		},
		data() {
			return {
				list: [],
			};
		},
		mounted() {
			//微信支付
			const wxObj = {
				icon: "common/wx.png",
				title: "微信支付",
				status: "wx",
				type: "1",
				select: false,
			};
			//余额支付
			const yeObj = {
				icon: "common/balance.png",
				title: "余额支付",
				status: "balance",
				type: "2",
				select: false,
			};

			if (this.showMethods === 1) {
				this.list = [wxObj, yeObj];
			} else if (this.showMethods === 2) {
				this.list = [wxObj];
			}
			//默认选择第一个
			this.onChoose(0);
		},
		methods: {
			/**
			 * 支付方式选择
			 */
			onChoose(index) {
				this.list.forEach((item, i) => {
					item.select = i === index;
				});
				this.$emit("update:status", this.list[index].type);
			},
		},
	};
</script>

<style lang="scss" scoped>
	.pay-methods-list {
		width: 100%;
		overflow: hidden;

		.methods-item {
			width: 100%;
			padding: 20rpx 0;
			border-bottom: 2rpx solid #ececec;

			&:last-child {
				border-bottom: none;
			}

			.icon {
				width: 48rpx;
				height: 48rpx;
			}

			.title {
				margin-left: 18rpx;
				flex: 1;
				color: $title-color;
			}

			.choose-bg {
				width: 30rpx;
				height: 30rpx;

				> image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>
